<template>
  <div class="shadePie">
    <div class="shadePieTag">
      <span :style='{ color: sumName.color }'>{{ sumName.value }}</span>
      <span style="color: #fff;">{{ theSum }}</span>
    </div>
    <div class="theShadePie" :id=id style="height: 200px;width: 400px;"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, computed } from 'vue';

const props = defineProps({
  data: Object
})
const sumName = props.data.sumName;
const id = props.data.id;
const data = props.data.data;
const sum = props.data.sum;
const theColorList = props.data.theColorList;
const anotherColorList = props.data.anotherColorList;

let dataHandled = computed(() => {
  let dataArr = [];
  for (let j = 0; j <= data.length - 1; j++) {
    let result = [], counter = 0;
    let theData = data[j].value.toString();
    let num = theData;
    for (let i = num.length - 1; i >= 0; i--) {
      counter++;
      result.unshift(num[i]);
      if (!(counter % 3) && i != 0) { result.unshift(','); }
    }
    let theValue = result.join('');
    dataArr.push(theValue);
  }
  return dataArr
})
let theSum = computed(() => {
  let result = [], counter = 0;
  let theData = sum.toString();
  let num = theData;
  for (let i = num.length - 1; i >= 0; i--) {
    counter++;
    result.unshift(num[i]);
    if (!(counter % 3) && i != 0) { result.unshift(','); }
  }
  let theValue = result.join('')
  return theValue
})

onMounted(() => {
  getThePie()
})

const getThePie = () => {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    color: theColorList,
    tooltip: {
      trigger: 'item'
    },
    selectedMode: 'false',
    series: [
      {
        clockwise: false,
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['0%', '63%'],
        label: {
          lineHeight: 25,
          show: true,
          position: 'outer',
          alignTo: 'edge',
          padding: [-25, -90],
          color: '#ffffff',
          formatter: (params) => {
            return `{forRich${params.dataIndex}|}  {a|${params.name}}\n{b|${dataHandled.value[params.dataIndex]}  ${params.percent}%}`
          },
          rich: {
            a: {
              verticalAlign: 'top',
              fontSize: 14,
              color: '#ffffff',
              fontFamily: "PingFang-Medium"
            },
            b: {
              verticalAlign: 'bottom',
              fontSize: 14,
              color: '#ffffff80',
              fontFamily: "PingFang-Bold"
            },
            forRich0: {
              verticalAlign: 'top',
              height: 16,
              width: 5,
              backgroundColor: theColorList[0]
            },
            forRich1: {
              verticalAlign: 'top',
              height: 16,
              width: 5,
              backgroundColor: theColorList[1]
            },
            forRich2: {
              verticalAlign: 'top',
              height: 16,
              width: 5,
              backgroundColor: theColorList[2]
            },
            forRich3: {
              verticalAlign: 'top',
              height: 16,
              width: 5,
              backgroundColor: theColorList[3]
            }
          }
        },
        labelLayout: {
          verticalAlign: "bottom",
        },
        labelLine: {
          lineStyle: {
            type: 'dashed',
            color: '#ffffff88'
          },
          show: true,
          length: 10,
          length2: 90,
        },
        emphasis: {
          scale: true,
          scaleSize: 20,
        },
        data: data
      },
      {
        clockwise: false,
        tooltip: {
          formatter: (params) => {
            return `  <div style="display: flex;align-items: center;">
                        <div><div style='margin-right: 5px;background-color:${theColorList[params.dataIndex]};height:10px;width:10px;border-radius:50%'></div></div>
                        <div style='margin-right: 15px;'>${params.name}</div>
                        <div style='font-weight:bold'>${dataHandled.value[params.dataIndex]}</div>
                      </div>`
          }
        },
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['0%', '60%'],
        itemStyle: {
          color: function (params) {
            let colorList = [`${anotherColorList[0]}`, `${anotherColorList[1]}`, `${anotherColorList[2]}`, `${anotherColorList[3]}`,];
            return colorList[params.dataIndex]
          }
        },
        label: {
          show: false
        },
        labelLayout: {
          verticalAlign: "bottom",
        },
        labelLine: {
          show: false,
        },
        emphasis: {
          scale: true,
          scaleSize: 20,
        },
        data: data
      },
    ]
  };
  myChart.on('mouseover', 'series.pie', function (params) {
    myChart.dispatchAction({
      type: 'highlight',
      dataIndex: params.dataIndex,
      seriesIndex: 0,
    });
  });
  myChart.on('mouseover', 'series.pie', function (params) {
    myChart.dispatchAction({
      type: 'highlight',
      dataIndex: params.dataIndex,
      seriesIndex: 1,
    });
  });
  myChart.on('mouseout', 'series.pie', function (params) {
    myChart.dispatchAction({
      type: 'downplay',
      dataIndex: params.dataIndex,
      seriesIndex: 0,
    });
  });
  myChart.on('mouseout', 'series.pie', function (params) {
    myChart.dispatchAction({
      type: 'downplay',
      dataIndex: params.dataIndex,
      seriesIndex: 1,
    });
  });
  option && myChart.setOption(option);
}

</script>
<style>
.theShadePie {
  background-image: url('@/assets/images/filledShadePie.png');
  background-position: center center;
  background-repeat: no-repeat;
}

.theShadePie::before {
  content: '';
  position: absolute;
  height: 42px;
  width: 42px;
  top: 40%;
  left: 45%;
  z-index: 999;
  background-image: url('@/assets/images/filledShadePie.png');
  background-position: center center;
  background-repeat: no-repeat;
}

.shadePie {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.shadePieTag {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 36px;
  width: 100%;
  background-image: url('@/assets/images/shadePieTag.png');
  background-position: center center;

  font-family: '优设标题黑';
}
</style>